<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>

    <script type="text/javascript" th:inline="javascript">
        $(document).ready(function(){
            var seat_num ;
            var total_bill      = 0 ;
            var pricePerTicked  = [[${film.getPrice()}]];//单价
            var maximumSeats    =   4;//预定座位数目的最大限制

            $('#bookNowButton').hide(); // 隐藏预定按钮

            $('.seat').each(function() {
                var column_num = parseInt( $(this).index() ) + 1;
                var row_num = parseInt( $(this).parent().index() )+1;
                seat_num = row_num+"-"+column_num ;
                $(this).text(seat_num); // 座位号
                $(this).addClass("seat"+seat_num);  // 给座位加css

                // if (){
                //     $(this).addClass('select')
                // }

                if($(this).hasClass('select')){ // 检查是否被选中
                    $(this).removeClass('select'); //如果选中了，移除选中的css
                    $(this).css('background-color','#D8D8D8'); // 重新加个背景

                    var currentSeatClass = $(this).attr('class').split(' ')[1];

                    console.log(currentSeatClass);
                    $( "#selected_seat ."+currentSeatClass ).remove();
                }

            });

            $("#seats .seat").click(function() {
                $('#errMsg').html('');
                if($(this).hasClass('select')){ // 检查是否被选中
                    $(this).removeClass('select'); //如果选中了，移除选中的css
                    $(this).css('background-color','#D8D8D8'); // 重新加个背景

                    var currentSeatClass = $(this).attr('class').split(' ')[1];

                    console.log(currentSeatClass);
                    $( "#selected_seat ."+currentSeatClass ).remove();

                }else if($(".your_selected_seat").length<maximumSeats && !$(this).hasClass('select')){ // 检查预定的座位数目是否超出限制
                    $(this).css('background-color','#71DCAA'); // 加背景颜色
                    $(this).addClass("select"); // 添加选中css

                    var column_num = parseInt( $(this).index() ) + 1;
                    var row_num = parseInt( $(this).parent().index() )+1;


                    $( "#selected_seat" ).append("<span class='your_selected_seat seat"+row_num+"-"+column_num+" '> 座位号: <b style='color:#EAABFF'>" + row_num+"-"+column_num +"</b> </br></span>");
                    $( "#buyTicket" ).append("<span class='your_selected_seat seat"+row_num+"-"+column_num+" '> 座位号: <b style='color:#EAABFF'>" + row_num+"-"+column_num +"</b> </br></span>");
                }else {
                    $('#errMsg').html('您选中的座位已经超过限制.');
                }

                if($(".your_selected_seat").length){
                    $('#bookNowButton').fadeIn(1000);
                }else {
                    $('#bookNowButton').fadeOut(1000);
                }
                //计算总价
                total_bill = $(".your_selected_seat").length * pricePerTicked;
                $('#total > span').html(total_bill);
            });

        });

    </script>

</head>
<body>
<div style="width:900px;margin: 0 auto;">
            <span id='screen'>
             <p>
                座位预定
            </p>
            </span>
    <div id="seats">
        <div class="seatsRaw">
            <div class="seat" th:if="${1==1}">
                <div th:class="seat"></div>
            </div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

    </div>

    <div id="booking_desc">
        <div class="booking_left">
            <p style="color: #FBBC53;font-weight: bold; font-size: larger;">您选中的座位 </p>
            <div id="selected_seat"></div>

                <button id="bookNowButton" type="button" class="buyTicket">现在预定</button>

            <div id="errMsg"></div>
        </div>

        <div class="booking_right">每个座位的单价: <span th:text="${film.getPrice()}"></span>元
            <br><br>
            <div id="total">总价：<span> 0 </span></div>
        </div>
    </div>

</div>

</body>

<script type="text/javascript" th:inline="javascript">

    $(".seat").bind("click",function () {
        $(this)

    })
    // 选购
    $(".buyTicket").bind("click",function () {
       var s  = $(".your_selected_seat");
       var myseat = [];
       alert(s[0].innerHTML);
       for (var i = 0; i < s.length; i++){
           var sea = s[i].innerHTML.substring(s[i].innerHTML.indexOf(">")+1)
           var seatNum = sea.substring(0,sea.indexOf("<"))
           myseat.push(seatNum);
       }
       var length = s.length;
       alert(length);
        alert(myseat);
        var subtotal = $('#total > span').text();
        window.open("http://127.0.0.1:8080/alipayTicket?"+"&subtotal="+subtotal+"&length="+length+"&myseat="+myseat+"&hall="+[[${film.getCinemaId()}]]+
            "&id="+[[${film.getId()}]]+"&MovieId="+[[${film.getMovieId()}]]);
        // toJump("/buy/buyTicketFinal?"+"&length="+length+"&myseat="+myseat+"&hall="+[[${film.getCinemaId()}]]+
        //     "&id="+[[${film.getId()}]]+"&MovieId="+[[${film.getMovieId()}]])
    })

</script>

</html>